<template>
  <px-dialog v-model="visible" class="tool-dialog" title="导入失败原因" width="1200px" @open="openDialog" @close="closeDialog">
    <div class="tool-dialog-content">
      <vxe-table :data="errData?.errors" class="equip-table" max-height="500" border>
        <vxe-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :title="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </vxe-column>
      </vxe-table>
      <!-- <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          class="equip-table-pagination"
          :total="total"
          @pagination="queryTable"
        /> -->
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { computed, reactive, toRefs } from "vue";

// 调用父级-查询主页列表、关闭弹窗方法
const emits = defineEmits(["closeDialog", "errData"]);
// 父级传过来的值
const props = defineProps(["visible", "errData"]);
const visible = computed(() => props.visible);

const state = reactive<any>({
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "toolCode", label: "工具编码", minWidth: "180", showOverflowTooltip: true },
    { prop: "toolName", label: "工具名称", minWidth: "90", showOverflowTooltip: true },
    { prop: "toolCategoryDesc", label: "工具分类", minWidth: "100", showOverflowTooltip: true },
    { prop: "toolUnitDesc", label: "工具单位", minWidth: "100", showOverflowTooltip: true },
    { prop: "toolModel", label: "型号/规格", minWidth: "90", showOverflowTooltip: true },
    { prop: "brandVal", label: "品牌", minWidth: "110", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "工具科室", minWidth: "110", showOverflowTooltip: true },
    { prop: "assetTagDesc", label: "资产标签", minWidth: "120", showOverflowTooltip: true },
    { prop: "custodianName", label: "管理人", minWidth: "120", showOverflowTooltip: true },
    { prop: "productionDate", label: "生产日期", minWidth: "120", showOverflowTooltip: true },
    { prop: "remark", label: "备注", minWidth: "90", showOverflowTooltip: true }
  ]
});
const { total, queryParams, tableColumns } = toRefs(state);

const openDialog = () => {};

// 查询列表关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>
